<template>
    <div class="Need">
        <div class="content">
            <h2>发布捐物项目</h2>
            <p class="ms">请填写下列信息</p>
            <div class="formBox" id="aaa">
                <van-form>
                     <!-- v-model="username" -->
                    <van-field
                        name="项目名称"
                        label="项目名称"
                        placeholder="项目名称"
                    />
                    <van-field
                        name="需求物资"
                        label="需求物资"
                        placeholder="填写需求物资（如 衣服）"
                    />
                    <van-field
                        name="项目描述"
                        label="项目描述"
                        placeholder=""
                    />
                    <van-field name="radio" label="类别">
                        <template #input>
                            <van-radio-group v-model="radio" direction="horizontal">
                            <van-radio name="1">个人项目</van-radio>
                            <van-radio name="2">组织项目</van-radio>
                            </van-radio-group>
                        </template>
                    </van-field>
                    <van-field name="uploader" label="项目图片">
                        <template #input>
                            <van-uploader v-model="uploader" />
                        </template>
                    </van-field>
                   <van-field
                        name="地址"
                        label="地址"
                        placeholder="请输入地址"
                    />
                    <van-field
                        name="项目负责人"
                        label="项目负责人"
                        placeholder="项目负责人"
                    />
                    <van-field
                        name="联系方式"
                        label="联系方式"
                        placeholder="联系方式"
                    />
                    <div style="margin: 16px auto;width:200px">
                        <van-button round block type="info" native-type="submit">
                        提交
                        </van-button>
                    </div>
                    </van-form>
            
        
            
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .Need{
         background: #EAEAEA;
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
    }
    .content{
        width: 1200px;
        // border: 1px solid;
        margin: auto;
        padding-top: 20px;
       
        h2{
            color: green;
        }
        .ms{
            color: #777;
            font-size: 14px;
            padding-left: 20px;
            margin-top: 5px;
        }
        .formBox{
            width: 500px;
            border: 1px solid;
            margin:20px auto;
            overflow: hidden;
            padding: 40px;
            border: 1px solid #c0c0c0;
            border-radius: 8px;
            background: #fff;
        }
    }
</style>
<script>
import Vue from 'vue';
import { Field,Form,RadioGroup, Radio,Uploader,Button} from 'vant';

Vue.use(Field);
Vue.use(Form);
Vue.use(Radio);
Vue.use(RadioGroup);
Vue.use(Uploader);
Vue.use(Button)
export default {
    data() {
    return {
      radio: '1',
      value: '',
      uploader: [],
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    },
  },
}
</script>